<template>
    <el-container style="height: 800px; border: 1px solid #eee">
     
     <el-container>
    
       <el-header  >
         <el-dropdown>
           <div >
           <div style="float: left;">
             <el-input v-model="inname" style="width:auto" placeholder="根据姓名查询"></el-input>
           <el-button type="primary" size="small"  icon="el-icon-search" v-on:click="btname">搜索</el-button>
           </div>
           <div style="float: left; margin-left: 10px;">
             <el-input v-model="inoaid" style="width:auto" placeholder="根据流水号查询"></el-input>
           <el-button type="primary" size="small"  icon="el-icon-search" v-on:click="btoaid">搜索</el-button>
           </div>
           <div style="float: left;  margin-left: 10px;">
             <el-input v-model="incontent" style="width:auto" placeholder="根据原内容查询"></el-input>
           <el-button type="primary" size="small"  icon="el-icon-search" v-on:click="btcontent"> 搜索</el-button>
           </div>
           
           <div style="float: left;  margin-left: 10px;">
             <el-input v-model="innote" style="width:auto" placeholder="根据关键字查询"></el-input>
           <el-button type="primary" size="small"  icon="el-icon-search" v-on:click="btnote">搜索</el-button>
           </div>
           
           
         </div>
         </el-dropdown>
   
       
   
       </el-header>
       
       <el-main>
        
         <el-table :data="tableData" style=" margin-top: 10px;">
           <el-table-column prop="setDate" label="日期" width="140">
           </el-table-column>
           <el-table-column prop="oaid" label="OA流水号" width="220">
           </el-table-column>
           <el-table-column prop="content" label="原内容" width="220">
           </el-table-column>
           <el-table-column prop="recontent" label="修改内容" width="220">
           </el-table-column>
           <el-table-column prop="name" label="修改人员" width="220">
           </el-table-column>
           <!-- <el-table-column prop="address" label="地址">
           </el-table-column> -->
           <el-table-column
         fixed="right"
         label="操作"
         width="100">
         <template slot-scope="scope">
           <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
           <!-- <el-button type="text" size="small">删除</el-button> -->
         </template>
       </el-table-column>
         </el-table>
       </el-main>
     </el-container>
   </el-container>
   
   
   
   </template>
   
   <script>
import router from '@/router';
     export default {
       data() {
         
         const item = {
           date: '',
           name: '',
           address: '',
         };
         return {
           // tableData: Array(20).fill(item),
           tableData: [],
   
           inname: '',
           inoaid: '',
           incontent: '',
           innote: '',
   
         }
       },
       methods:{
         sear:function(e){
           this.$axios({
               url: "/record/list",
               method: "get", 
             })
               .then((res) => {
                 console.log("cch");
   
                 console.log(res.data);
                 console.log(res.data.message);
                 console.log(res.data.data);  
                 console.log(this.list);
                 this.tableData=res.data.data
   
               })
               .catch((err) => {
                 console.log(err);
               });
         },
         btname:function(e){
           this.$axios({
               url: "/record/selectByname",
               method: "post", 
               data:{
                 "name":this.inname,
               },
             })
               .then((res) => {
                 this.tableData=res.data.data
               })
               .catch((err) => {
                 console.log(err);
               });
         },
         btoaid:function(e){
           this.$axios({
               url: "/record/selectByoaid",
               method: "post", 
               data:{
                 "oaid":this.inoaid,
               },
             })
               .then((res) => {
                 this.tableData=res.data.data
               })
               .catch((err) => {
                 console.log(err);
               });
         },
         btnote:function(e){
           this.$axios({
               url: "/record/selectBynote",
               method: "post", 
               data: {
                 "note":this.innote,
               },
             })
               .then((res) => {
                 this.tableData=res.data.data
               })
               .catch((err) => {
                 console.log(err);
               });
         },
         btcontent:function(e){
           this.$axios({
               url: "/record/selectBycontent",
               method: "post", 
               data:{
                 "content": this.incontent
               }
             })
               .then((res) => {
                 this.tableData=res.data.data
               })
               .catch((err) => {
                 console.log(err);
               });
         },
         handleClick(row) {
           console.log(row.id);
           router.push({
            path:'/details',
            name:'details',
            params: {
            context: row.id
        }
           })
         }
       }
       
     };
   </script>
   <style>
     .el-header {
       background-color: #B3C0D1;
       color: #333;
       line-height: 60px;
     }
     
     .el-aside {
       color: #333;
     }
   </style>
   